html {
    height: 100%;
  }
  
  
  .login-box {
    position: relative;
    top: 3%;
    width: 100%;
  
    padding: 40px;
    background: rgba(0,0,0,.5);
    box-sizing: border-box;
    /* box-shadow: 0 15px 25px rgba(0,0,0,.6); */
    border-radius: 10px;

  }

  .button-box {
    position: relative;
    top: 3%;
    width: 100%;
  }
  .big-box {
    position: absolute ;
    top: 8rem;
    right: 0rem;
    width: 24rem;
    height: 42rem;
    transform: translate(-25%,-20px);
    background: rgba(255, 254, 254, 0.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    backdrop-filter: blur(50px);
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
  
  .login-box h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #d1c6c6;
    text-align: center;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }


  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
       -webkit-transition-delay: 99999s;
       -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }
  
  .login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #03e9f4;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px
  }
  
  .login-box a:hover {
    background: #03e9f4;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 100px #03e9f4;
  }
  
  .login-box a span {
    position: absolute;
    display: block;
  }
  
  .error{
    position: absolute;
    left: 18%;
    top: 1rem;
    text-align: center;
    color: #ffffff;
  }
  body {
    margin:0;
    padding:0;
  }
  .bg{
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    font-family: sans-serif ;
    background: linear-gradient(#2e4e7e,rgb(58,110,165),rgb(108, 230, 223)) !important;
  }